<template>
  <div class="views-container">
    <div class="goodsBtn">
      <el-button @click="passAll">批量通过</el-button>
      <el-button @click="refuseAll">批量拒绝</el-button>
      <el-button type="primary" @click="paySet">付费设置</el-button>
    </div>
    <div class="goodsBtn">
      <div class="wlm-form-content">
        <div class="wlm-dialog-main">
          <div class="wlm-dialog-content">
          <el-dialog title="付费设置" :visible.sync="dialogFormVisible">
            <el-form :model="formFormatData.formData">
              <el-radio-group v-model="formFormatData.formData.open_pay">
                <el-radio :label="1">开启付费功能</el-radio>
                <el-radio :label="0">关闭付费功能</el-radio>
              </el-radio-group>
              <el-form-item
                label="直播间费用"
                v-if="formFormatData.formData.open_pay==1"
                style="margin-top:20px"
              >
                <el-input
                  v-model="formFormatData.formData.live_room_cost"
                  style="width:20%;"
                  size="mini"
                ></el-input>
              </el-form-item>
              <el-form-item label="外派主播费用" v-if="formFormatData.formData.open_pay==1">
                <el-input
                  v-model="formFormatData.formData.live_actor_cost"
                  style="width:20%;"
                  size="mini"
                ></el-input>
                <p>注：外派主播费用填写为0，将不会计入直播申请总费用中</p>
              </el-form-item>
            </el-form>
            <div slot="footer" class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter" >
              <el-button @click="dialogFormVisible = false">关闭</el-button>
              <el-button @click="saveFree" type="primary">保存</el-button>
            </div>
          </el-dialog>
          </div>
        </div>
      </div>
      <el-tabs
        type="border-card"
        v-model="tableFormatData.liveapplication.files.status"
        @tab-click="filesSerch"
      >
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="申请成功" name="1"></el-tab-pane>
        <el-tab-pane label="待审核" name="2"></el-tab-pane>
        <el-tab-pane label="删除" name="3"></el-tab-pane>
        <el-tab-pane label="驳回" name="4"></el-tab-pane>

        <el-table
          :ref="tableFormatData.liveapplication.key"
          :data="tableFormatData.liveapplication.tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="sort" width="80" label="排序" sortable>
            <template slot-scope="scope">
              <el-input-number
                @blur="changeTableItem({id:scope.row.room_id,sort:scope.row.sort},tableFormatData.liveapplication.change.sort)"
                style="width:100%;"
                size="mini"
                v-model="scope.row.sort"
                :controls="false"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="申请人信息">
            <template slot-scope="scope">
              <div class style="display:flex">
                <img :src="scope.row.file_url" style="width:20px;height:20px;margin-right:5px" />
                <p>{{scope.row.name}}</p>
              </div>
              <p>联系方式：{{scope.row.telephone}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="直播内容描述" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.notes}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="直播时间" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{new Date(scope.row.start_time).toLocaleString()}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="主播信息" show-overflow-tooltip>
            <template slot-scope="scope">
              <p>昵称：{{scope.row.anchor_name}}</p>
              <p>微信号：{{scope.row.anchor_wechat}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class>
                <p v-if="scope.row.pay_status==10" style="color:red">未支付：{{scope.row.pay_price}}</p>
                <p v-if="scope.row.pay_status==20">已支付：{{scope.row.pay_price}}</p>
                 <p v-if="scope.row.pay_status==30">已退款：{{scope.row.pay_price}}</p>
              </div>
              <div class>
                <el-tag type="success" v-if="scope.row.status==1">通过审核</el-tag>
                <el-tag type="warning" v-else-if="scope.row.status==2">审核中</el-tag>
                <el-tag type="danger" v-else-if="scope.row.status==3">删除</el-tag>
                <el-tag v-else-if="scope.row.status==4" type="info">驳回</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="operation-group" v-if="scope.row.status==1">
                <el-button type="text" @click="open(scope.row.room_id)">创建直播间</el-button>
              </div>
              <div class="operation-group" v-else-if="scope.row.status==2">
                <el-button type="text" @click="entering(scope.row.room_id)">通过</el-button>
                <el-button type="text" @click="enteringbtn(scope.row.room_id)">拒绝</el-button>
                <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </div>
              <div class="operation-group" v-else-if="scope.row.status==4">
                <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tabs>
      <div class="pagination-content flex-row flex-justify-e flex-align-c">
        <el-pagination
          :disabled="!hasTableData"
          @size-change="listPageChange"
          @current-change="listPageChange"
          :current-page.sync="tableFormatData.liveapplication.pagination.page"
          :page-sizes="tableFormatData.liveapplication.pagination.pagesizes"
          :page-size.sync="tableFormatData.liveapplication.pagination.list_rows"
          layout="total, sizes, prev, pager, next, jumper"
          :total="hasTableData?tableFormatData.liveapplication.pagination.total : 0"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins/mixins'
import {
  getPaySet,
  savePaySet,
  getApplyList,
  modifySort,
  applyDelete,
  checkPass,
  checkRefuse
} from '@/api/upload'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  data() {
    return {
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: '',
            params: {}
          },
          submitForm: savePaySet
        },
        formData: {
          open_pay: 0,
          live_room_cost: 0,
          live_actor_cost: 0
        }
      },
      tableFormatData: {
        current: 'liveapplication',
        liveapplication: {
          key: 'liveapplication',
          api: {
            getList: getApplyList
          },
          tableData: [],
          files: {
            status: 0
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          },
          change: {
            sort: {
              name: '排序',
              key: 'sort',
              api: modifySort
            }
          }
        }
      },

      multipleSelection: [],
      dialogFormVisible: false
    }
  },

  methods: {
    passAll() {
      this.$confirm('确定通过所选的直播间审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          checkPass({ ids: this.multipleSelection }).then((res) => {
            const {
              data: { code, msg }
            } = res
            if (code == 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.filesEmpty()
            } else {
              this.$message.error(msg)
            }
          })
        })
        .catch((res) => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    refuseAll() {
      this.$confirm('确定拒绝所选的直播间审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          checkRefuse({ ids: this.multipleSelection }).then((res) => {
            const {
              data: { code, msg }
            } = res
            if (code == 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.filesEmpty()
            } else {
              this.$message.error(msg)
            }
          })
        })
        .catch((res) => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    entering(id) {
      const ids = []
      ids.push(id)
      this.$confirm('确定通过该直播间审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          checkPass({ ids }).then((res) => {
            const {
              data: { code, msg }
            } = res
            if (code == 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.filesEmpty()
            } else {
              this.$message.error(msg)
            }
          })
        })
        .catch((res) => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    enteringbtn(id) {
      const ids = []
      ids.push(id)
      this.$confirm('确定拒绝该直播间审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          checkRefuse({ ids }).then((res) => {
            const {
              data: { code, msg }
            } = res
            if (code == 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.filesEmpty()
            } else {
              this.$message.error(msg)
            }
          })
        })
        .catch((res) => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    handleDelete(index, row) {
      console.log(index, row)
      this.$confirm('此操作将删除该直播间申请, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          applyDelete({ id: row.room_id }).then((res) => {
            const { code } = res.data
            code == 1 && this.$message.success('操作成功')
            this.filesEmpty()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    saveFree() {
      this.formFormatSubmit()
      this.dialogFormVisible = false
    },
    paySet() {
      this.dialogFormVisible = true
      getPaySet().then((res) => {
        console.log(res)
        if (res.data.code == 1) {
          if(resd.data.data!=[]){
             this.formFormatData.formData.open_pay = res.data.data.open_pay - 0
          this.formFormatData.formData.live_actor_cost =
            res.data.data.live_actor_cost
          this.formFormatData.formData.live_room_cost =
            res.data.data.live_room_cost
          }else{
            this.formFormatData.formData.open_pay = 0
          }
         
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = []
      val.map((item) => {
        if (item.status == 2) {
          this.multipleSelection.push(item.room_id)
        }
      })

      console.log(this.multipleSelection)
    },
    open(id) {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('p', null, [
          h(
            'p',
            { style: 'text-align: center' },
            '请联系申请人员确认主播微信号是否完成实名认证 '
          ),
          h(
            'p',
            { style: 'text-align: center' },
            '如果未完成实名认证将导致创建直播间失败'
          )
        ]),
        showCancelButton: true,
        confirmButtonText: '已实名认证，继续创建直播间',
        cancelButtonText: '暂时离开',
        center: true
      }).then((action) => {
        // 创建直播间
        console.log('创建直播间')
        this.$router.push({
          path: '/livetelecast/addlivestudio',
          query: { id }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goodsBtn {
  padding: 16px;
  background-color: #ffffff;
}
</style>
